<template>
	<view class="proxy-team-page">
		<view class="header">
			<view class="row bg-white">
				<u-search class="flex1" v-model="keyword" shape="round" background="white" placeholder="请输入会员昵称/手机号码"
					@search="onSearch" @custom="onSearch" />
				<view @tap="onSearch" class="mr20">确定</view>
			</view>


			<view class="top-bar row bg-white md">
				<view :class="'bar-item row-center ' + (active == 'all' ? 'item-active' : '')" @tap="changeTab"
					data-active="all">全部</view>
				<view :class="'bar-item row-center ' + (active == 'first' ? 'item-active' : '')" @tap="changeTab"
					data-active="first">一级团队</view>
				<view :class="'bar-item row-center ' + (active == 'second' ? 'item-active' : '')" @tap="changeTab"
					data-active="second">二级团队</view>
			</view>

			<view class="sort-bar row">
				<view class="sort-bar-item row-center nr" @tap="sortStatusChange" data-sort-type="0">
					<view :class="sortType == 0 ? 'item-active' : ''">团队排序</view>
					<view class="column">
						<trigonometry direction="up" :color="fansSort == 'asc' ? '#FF2C3C' : '#585858'" size="small">
						</trigonometry>
						<trigonometry :color="fansSort == 'desc' ? '#FF2C3C' : '#585858'" size="small"></trigonometry>
					</view>
				</view>
				<view class="sort-bar-item row-center nr" @tap="sortStatusChange" data-sort-type="1">
					<view :class="sortType == 1 ? 'item-active' : ''">金额排序</view>
					<view class="column">
						<trigonometry direction="up" :color="moneySort == 'asc' ? '#FF2C3C' : '#585858'" size="small">
						</trigonometry>
						<trigonometry :color="moneySort == 'desc' ? '#FF2C3C' : '#585858'" size="small"></trigonometry>
					</view>
				</view>
				<view class="sort-bar-item row-center nr" @tap="sortStatusChange" data-sort-type="2">
					<view :class="sortType == 2 ? 'item-active' : ''">订单排序</view>
					<view class="column">
						<trigonometry direction="up" :color="orderSort == 'asc' ? '#FF2C3C' : '#585858'" size="small">
						</trigonometry>
						<trigonometry :color="orderSort == 'desc' ? '#FF2C3C' : '#585858'" size="small"></trigonometry>
					</view>
				</view>
			</view>
		</view>
		<view class="content">
			<view class="card-box">
				<view v-for="(item, index) in fansObject" :key="index" class="card-item">
					<view class="row">
						<view class="card-img">
							<image :src="item.avatar" class="img" />
						</view>
						<view class="fans-info ml20">
							<view class="fans-name row">
								<text>{{item.nickname || '番禺社区服务点'}}</text>
								<text class="level">(一级团队)</text>
							</view>
							<view class="phone-row">
								<image src="../../../static/images/icon_7.png" mode="widthFix" class="icon1"></image>
								<view class="text">{{item.mobile || '15982291183'}}</view>
								<image src="../../../static/images/icon_6.png" mode="widthFix" class="icon2"></image>
							</view>
							<view class="date">{{item.create_time || '2024-02-12 11:25'}}</view>
						</view>
					</view>
					<!-- <view class="column xs">
						<view class="msg"><span class="primary">{{item.fans_team}} </span>人</view>
						<view class="mt5 msg"><span>{{item.fans_order}} </span>单</view>
						<view class="mt5 msg"><span>{{item.fans_money}} </span>元</view>
					</view> -->
					<view class="content">
						<view class="item">
							<view class="label">代理下属(人)</view>
							<view class="value">5</view>
						</view>
						<view class="item">
							<view class="label">单总数(单)<u-icon class="ml8" @tap="onOpenTipModal1" name="question-circle" size="28" color="#999"></u-icon></view>
							<view class="value">252</view>
						</view>
						<view class="item">
							<view class="label">营收总额(元)<u-icon class="ml8" @tap="onOpenTipModal2" name="question-circle" size="28" color="#999"></u-icon></view>
							<view class="value"><text class="text">￥</text>57586.00</view>
						</view>
					</view>
				</view>
				<loading-footer :status="loadingStatus" slotEmpty>
					<view class="data-null column-center" slot="empty">
						<image class="img-null" src="/static/images/order_null.png"></image>
						<text>暂无相关数据...</text>
					</view>
				</loading-footer>
			</view>
		</view>
	</view>
</template>


<script>
	import {
		loadingType,
		SortType,
		FansType
	} from '@/utils/type';
	import {
		getUserFans
	} from '@/api/user';
	import {
		loadingFun
	} from '@/utils/tools'

	export default {
		data() {
			return {
				active: FansType.ALL,
				loadingStatus: loadingType.LOADING,
				sortType: 0,
				keyword: "",
				page: 1,
				fansSort: SortType.ASC,
				moneySort: SortType.NONE,
				orderSort: SortType.NONE,
				fansObject: [{}, {}]
			};
		},

		components: {},
		props: {},

		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad: function(options) {
			// this.getUserFansFun();
		},

		onReachBottom() {
			this.getUserFansFun();
		},

		methods: {
			onOpenTipModal1(){
				uni.showModal({
					content:"下属团队的订单统计",
					confirmText:"知道了",
					showCancel: false
				})
			},
			
			onOpenTipModal2(){
				uni.showModal({
					content:"下属团队的营业额统计",
					confirmText:"知道了",
					showCancel: false
				})
			},
			
			onSearch() {
				console.log(this.keyword);
				this.cleanStatus();
				this.getUserFansFun();
			},

			changeTab(e) {
				let {
					active
				} = e.currentTarget.dataset;
				this.active = active
				this.cleanStatus();
				this.getUserFansFun();
			},

			// 获取粉丝列表
			getUserFansFun() {
				const {
					fansSort,
					moneySort,
					orderSort,
					active,
					loadingStatus,
					keyword,
					fansObject,
					page,
				} = this;
				const inputData = {
					type: active,
					keyword,
					fans: fansSort,
					money: moneySort,
					order: orderSort
				};

				loadingFun(getUserFans, page, fansObject, loadingStatus, inputData).then(res => {
					if (res) {
						this.page = res.page;
						this.fansObject = res.dataList
						this.loadingStatus = res.status
					}
				})
			},

			// 清理状态
			cleanStatus() {
				this.loadingStatus = loadingType.LOADING;
				this.fansObject = [];
				this.page = 1
			},

			// 排序状态变化 
			sortStatusChange(e) {
				let {
					sortType
				} = e.currentTarget.dataset;
				let {
					fansSort,
					moneySort,
					orderSort
				} = this;

				this.sortType = parseInt(sortType)

				switch (parseInt(sortType)) {
					case 0:
						// 团队排序
						if (fansSort == SortType.NONE || fansSort == SortType.DESC) {
							this.fansSort = SortType.ASC;
							this.moneySort = SortType.NONE
							this.orderSort = SortType.NONE
						} else if (fansSort == SortType.ASC) {
							this.fansSort = SortType.DESC;
							this.moneySort = SortType.NONE;
							this.orderSort = SortType.NONE;
						}
						break;

					case 1:
						// 金额排序
						if (moneySort == SortType.DESC || moneySort == SortType.NONE) {
							this.moneySort = SortType.ASC;
							this.fansSort = SortType.NONE;
							this.orderSort = SortType.NONE
						} else if (moneySort == SortType.ASC) {
							this.moneySort = SortType.DESC;
							this.fansSort = SortType.NONE;
							this.orderSort = SortType.NONE;
						}

						break;
					case 2:
						// 订单排序
						if (orderSort == SortType.DESC || orderSort == SortType.NONE) {
							this.orderSort = SortType.ASC;
							this.moneySort = SortType.NONE;
							this.fansSort = SortType.NONE;
						} else if (orderSort == SortType.ASC) {
							this.orderSort = SortType.DESC;
							this.moneySort = SortType.NONE;
							this.fansSort = SortType.NONE;
						}

						break;
				}

				this.cleanStatus();
				this.getUserFansFun();
			}

		}
	};
</script>
<style lang="scss">
	@import "index.scss";
</style>